<template>
  <div class="success-container">
    <div class="form-container">
      <h2>登录成功</h2>
      <p class="text-center"> 
        <span @click="goToHome" style="cursor: pointer;">进入首页 {{ userStore.username }}！</span>
      </p>
      <button @click="handleLogout" class="mt-4">退出登录</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores/userStore';

const router = useRouter();
const userStore = useUserStore();

const handleLogout = () => {
  userStore.logout();
  router.push('/login');
};

const goToHome = () => {
  router.push('/home');
};
</script>

<style scoped>
.success-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.text-center {
  text-align: center;
  font-weight: bold; /* 加粗文本 */
  font-size: 1.25rem;
}

.mt-4 {
  margin-top: 1rem;
}
</style>